<template>
  <div class="searchList">
    <Header></Header>
    <div class="loading" v-if="loading"><mt-spinner type="double-bounce" color="#FFBF44"></mt-spinner></div>
    <div class="swiper_box" v-if="!loading">
      <swiper :options="swiperOption"  ref="mySwiper">
        <!-- 这部分放你要渲染的那些内容 -->
        <swiper-slide v-for="(item,index) in imgData01" :key="index">
          <img v-if="isCity" style="height: 230px;width: 100%;border-radius: 10px;display: block;" :src="item.cityImageUrl" class="index_img">
          <img v-if="isSpot" style="height: 230px;width: 100%;border-radius: 10px;display: block;" :src="item.siteImageUrl" class="index_img">
        </swiper-slide>
        <!-- 这是轮播的小圆点 -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>

    <p class="block_title" style="text-align: center">{{$t('m.poDes')}}</p>
    <div class="list_box clearfix" v-if="isCity">
      <div @click="toAreaDetail(item.site.id)" v-for="(item,index) in itemData01" :key="index" class="item">
        <div class="item_img"><img v-if='item.site.siteImages.length>0' :src="item.site.siteImages[0].siteImageUrl"/></div>
        <p v-if="$i18n.locale==='zh_cn'">{{item.site.site_name}}</p>
        <p v-else>{{item.site.site_name_en}}</p>
      </div>
    </div>
    <div class="list_box clearfix" v-if="isSpot">
      <div @click="toAreaDetail(item.subSiteId)" v-for="(item,index) in itemData01" :key="index" class="item">
        <div class="item_img"><img v-if='item.subSiteImages.length>0' :src="item.subSiteImages[0].subSiteImageUrl"/></div>
        <p>{{item.subSiteName}}</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Header from './comment/header/header.vue'
  export default {
    data(){
      return{
        imgData01:[],
        swiperOption: {
          effect: 'coverflow',
          slidesPerView: 1.17,
          spaceBetween: 1,
//            height:100,
          coverflowEffect: {
            rotate: 0,
            stretch: -40,
            depth: 200,
            modifier: 1,
            slideShadows : true,
          },
          loop: true,
          loopAdditionalSlides : 1,
          slidesOffsetBefore : 0.3,
          pagination: '.swiper-pagination',
          centeredSlides: true,
          paginationClickable: true,
          onSlideChangeEnd: swiper => {
            //这个位置放swiper的回调方法
//            this.page = swiper.realIndex+1;
//            this.index = swiper.realIndex;
          },
        },
        swiperSlides: [1, 2, 3, 4, 5],
        showAll:false,
        detailText:'北京，简称“京”，是中华人民共和国的首都、直辖市、国家中心城市、超大城市、国际大都市，全国政治中心、文化中心、国际交往中心、科技创新中心，是中国共产党中央委员会、中华人民共和国中央人民政府、全国人民代表大会、中国人民政治协商会议全国委员会、中华人民共和国中央军事委员会所在地，也是中部战区司令部驻地。北京位于华北平原北部，背靠燕山，毗邻天津市和河北省。北京的气候为典型的北温带半湿润大陆性季风气候。北京是首批国家历史文化名城和世界上拥有世界文化遗产数最多的城市，三千多年的历史孕育了故宫、天坛，北京，简称“京”，是中华人民共和国的首都、直辖市、国家中心城市、超大城市、国际大都市，全国政治中心、文化中心、国际交往中心、科技创新中心，是中国共产党中央委员会、中华人民共和国中央人民政府、全国人民代表大会、中国人民政治协商会议全国委员会、中华人民共和国中央军事委员会所在地，也是中部战区司令部驻地。北京位于华北平原北部，背靠燕山，毗邻天津市和河北省。北京的气候为典型的北温带半湿润大陆性季风气候。北京是首批国家历史文化名城和世界上拥有世界文化遗产数最多的城市，三千多年的历史孕育了故宫、天坛...北京，简称“京”，是中华人民共和国的首都、直辖市、国家中心城市、超大城市、国际大都市，全国政治中心、文化中心、国际交往中心、科技创新中心。',
        itemData01:[],
        isSpot:false,
        isCity:false,
        loading:true
      }
    },
    components: {Header},
    methods:{
      toAreaDetail(i){
        if(this.isCity){
          this.$router.push('/areaDetail?id='+i+'')
        }
      },
      getInfo(){
        let that = this;
        let type = this.$route.query.type;
        let id = this.$route.query.id;
        if ( type === 'city' ){
          that.isSpot = false;
          that.isCity = true;
          that.requestAction('city/findHotSiteBycityId',{
            locationCityId: id,
            userId:sessionStorage.getItem('userId'),
            lang:that.$i18n.locale
          },function(res){
            that.itemData01 = res.data.data;
            that.loading = false;
          });
          that.requestAction('city/getCityByCityId',{
            cityId: id
          },function(res){
            that.imgData01 = res.data.data.cityImages;
            that.$store.state.detailTitle = res.data.data.cityName;
            that.loading = false;
          });
        }else if( type === 'spot' ){
          that.isSpot = true;
          that.isCity = false;
          that.requestAction('site/getAllHotSite',{
            siteId: id
          },function(res){
            console.log(res)
            that.itemData01 = res.data.data
            that.loading = false;
          });
          that.requestAction('site/getSite',{
            siteId: id,
            userId:sessionStorage.getItem('userId')
          },function(res){
            console.log(res)
            that.imgData01 = res.data.data[0].site.siteImages
            that.$store.state.detailTitle = res.data.data[0].site.site_name;
            that.loading = false;
          });
        }
      },
      requestAction(url,data,fn){
        this.$axios({
          method:'get',
          url: this.$store.state.apiUrl + url,
          params: data
        }).then(function (res) {
          fn(res);
        }).catch(function (error) {
          console.log('error')
        })
      }
    },
    mounted(){
      this.$store.state.showTab =  false;
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    created(){
      this.getInfo();
    }
  };
</script>

<style scoped="scoped">
  .searchList{padding-top: 0.64rem;}
  .list_box{padding: 0 0.1rem}
  .item{width: 1.67rem;float: left;height: 1.46rem;margin: 0 0.05rem 0.15rem;background: #fff;box-shadow: 0 2px 6px 0 rgba(0,0,0,0.10);border-radius: 5px;padding: 0.1rem}
  .item img{width: 100%;display: block;height: 100%}
  .item_img{height: 0.82rem;}
  .item p{font-size: 0.14rem;color: #333333;line-height: 0.3rem;margin-top: 0.1rem}
</style>
